// ==========================================================================
// Multiple choice cards
// ==========================================================================

.card--selectquestion__expansion {
  @extend %card-expansion;
}

.survey__row--selected {
  .card--selectquestion__expansion,
  .card__settings {
    border-left-color: $linkColor;
    border-right-color: $linkColor;
    border-bottom-color: $linkColor;
  }
}

// ==========================================================================
// Overrides
// ==========================================================================

// multi-choice expanded
.right-and-down-caret {
  @extend .fa, .fa-fw, .fa-caret-right;
}

.card--expandedchoices {
  .right-and-down-caret {
    @extend .fa-caret-down;
  }
}

.card--selectquestion {
  .row__multioptions {
    display: none;
  }

  &.card--expandedchoices {
    .row__multioptions {
      display: block;
    }
  }
}

.option-placeholder {
  height: 32px;
  margin-bottom: 10px;
  border: 2px solid #d9dde1;
  border-radius: 4px;
  margin-right: 25px;
  margin-left: 5px;
}

// ==========================================================================
// Single/multiple select questions
// ==========================================================================

// .xlf-option-view BECOMES .multioptions__option
.multioptions__option {
  margin-bottom: 4px;
  margin-left: 4px;
  position: relative;

  div.editable-wrapper {
    font-weight: 600;
    border-radius: 5px;
    border: $thinBorderStyle;
    padding: 5px;
    font-size: 13px;
    display: inline-block;
    width: 72%;
    vertical-align: top;
    height: auto;
    position: relative;
    min-height: 18px;
    cursor: move;

    &:focus {
      border-color: lighten($cool-blue, 10%);
      color: lighten($cool-blue, 10%);
    }

    span {
      cursor: text;
    }

    .editable-input input {
      line-height: 1em;
      vertical-align: middle;
      margin-top: -3px;
    }
  }

  code {
    font-weight: 600;
    font-size: 11px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    background-color: #E3E7EC;
    padding: 2px;
    margin: 2px;
    width: 25%;
    text-align: left;
    display: inline-block;
    margin-left: 2%;
    overflow: hidden;

    label {
      display: inline-block;
      width: 40%;
      padding-left: 4px;
      color: #7E858C;
    }

    span,
    .editable-container {
      text-align: right;
      display: inline-block;
      float: right;
      width: 60%;
      padding-right: 4px;
      color: #7E858C;
      overflow-wrap: break-word;
      cursor: text;
    }

    .editable-unsaved {
      color: $linkColor;
    }

    input {
      text-align: right;
      display: inline-block;
      float: right;
      width: 60% !important;
      color: $linkColor;
      line-height: inherit;
      font-size: 11px;
    }
  }

  i.fa-trash-o {
    position: absolute;
    left: -20px;
    top: 8px;
    color: #D08B8C;
    font-size: 16px;
    cursor: pointer;
  }
}

.card__addoptions {
  position: relative;
}

.card__addoptions__layer {
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 1;
}
